<template>
<div class="home nav p-2">
	<van-collapse v-model="activeName" accordion @change='cordovaClick'>
	  <van-collapse-item title="（点我）支付宝支付" name="1">
	    
	  </van-collapse-item>
	  <van-collapse-item title="（点我）获取app版本" name="2">
	    <p>版本号:{{version}}</p>
	  </van-collapse-item>
	  <van-collapse-item title="（点我）拍照" name="3">
	    <img :src='img' v-show='img'/>
	  </van-collapse-item>
    <!--<van-collapse-item title="FileTransfer上传" name="4">
	    
	  </van-collapse-item>
    <van-collapse-item title="扫码" name="5">
	    <p>扫描结果：{{barcodeScannerText}}</p>
	  </van-collapse-item>-->
    <van-collapse-item title="（点我）获取设备相关信息" name="6">
	    <p @click='deviceBtn("cordova")'>（点我）cordova版本信息：{{device.cordova}}</p>
      <p @click='deviceBtn("model")'>（点我）设备的模型或产品的名称：{{device.model}}</p>
      <p @click='deviceBtn("platform")'>（点我）设备的操作系统名称：{{device.platform}}</p>
      <p @click='deviceBtn("uuid")'>（点我）设备的全局惟一标识符：{{device.uuid}}</p>
      <p @click='deviceBtn("version")'>（点我）操作系统版本号：{{device.version}}</p>
      <p @click='deviceBtn("manufacturer")'>（点我）得到设备的制造商：{{device.manufacturer}}</p>
      <p @click='deviceBtn("isVirtual")'>（点我）设备是否运行在模拟器：{{device.isVirtual}}</p>
      <p @click='deviceBtn("serial")'>（点我）设备硬件序列号：{{device.serial}}</p>
	  </van-collapse-item>
    <!--<van-collapse-item title="微信登录" name="7">
      <p>openid：{{wechatUserInfo.openid}}</p>
      <p>unionid：{{wechatUserInfo.unionid}}</p>
	    <p>用户昵称：{{wechatUserInfo.nickname}}</p>
      <p>性别：{{wechatUserInfo.sex}}</p>
      <p>用户所在国家：{{wechatUserInfo.country}}</p>
      <p>用户所在省份：{{wechatUserInfo.province}}</p>
      <p>用户所在城市：{{wechatUserInfo.city}}</p>
      <p>用户的语言：{{wechatUserInfo.language}}</p>
      <img :src='wechatUserInfo.headimgurl'/>
	  </van-collapse-item>-->
    
    <!--<van-collapse-item title="微信分享" name="8">
	    <p>信息：</p>
	  </van-collapse-item>
    <van-collapse-item title="微信支付" name="9">
	    <p>支付现金：</p>
	  </van-collapse-item>-->
    <van-collapse-item title="（点我）蓝牙开关" name="10">
      <p>蓝牙状态：{{Bluetooth}}</p>
    </van-collapse-item>
    <van-collapse-item title="（这里有点小事故，需要点我三下）通讯录" name="11">
       <van-cell v-for='(item,index) in contact' :key='index' :title="item.name" :value="item.phoneNumbers" />
    </van-collapse-item>
    <van-collapse-item title="（点我）拨打电话" name="12">
      <p>电话号码：{{number}}</p>
    </van-collapse-item>
    <van-collapse-item title="（点我）屏幕截取" name="13">
      <p><img :src='screenImg' v-show='screenImg'/></p>
    </van-collapse-item>
	</van-collapse>
</div>
</template>

<script>
export default {
  data() {
    return {
      img: '',        //图片base64回显
      activeName:'',  //手风琴model
      version:'',   //版本号
      fileURL:'',   //上传的文件
      barcodeScannerText:'',  //扫码之后的结果 
      device:{},
      wechatUserInfo:{},    //微信获取用户信息，
      Bluetooth:'',      //蓝牙状态
      contact:[],         //通讯录json
      number:15363965241,
      screenImg:'',
    }
  },
  created() {
     
  },
  methods: {
  	cordovaClick(index){
      const _this=this;
  		switch(index){
  			case '1':		//支付宝支付
          var data='alipay_sdk=alipay-sdk-java-dynamicVersionNo&app_id=2018112062231700&biz_content=%7B%22body%22%3A%22%E8%AE%A2%E5%8D%95%E6%94%AF%E4%BB%98%22%2C%22out_trade_no%22%3A%22O1545979886618%22%2C%22passback_params%22%3A%2249%2CG1545979881205%2C01%2Cnull%2C01%2C0%2C0%22%2C%22product_code%22%3A%22QUICK_MSECURITY_PAY%22%2C%22subject%22%3A%22%E4%BC%9A%E5%91%98%E4%B8%8B%E5%8D%95%22%2C%22timeout_express%22%3A%2260m%22%2C%22total_amount%22%3A%220.01%22%7D&charset=utf-8&format=json&method=alipay.trade.app.pay&notify_url=http%3A%2F%2Fjinrd.java.jxcraft.net%2Fjrdapp%2Fpay%2Fpay%2Fapi%2FaliPayReturn&sign=BYYZ%2FyzSJA8dzUeyM%2FLVIvaQjKqfTaqMOv6xaOomnM64%2Fc%2FVsgKGhHvDHcYKDzl8tHSrW6r1ZKMFrF3tbInyKUiTywYqK4OtQXZINEd%2BE0kpZXwCC47pTrm7XiLqLl6dh%2F32yaZy3kkPLnEgATZIFfU014PSU45U3Gf5edrvusv3mRdDoZ2TaK9agg%2Bt7gSl6GyDfwj8AqADV0RiZWE7FqWKgn%2BiAhp%2F9%2BlIXEnHFk4499owMiI8Zb6hRwbgGcIhlOHxXo8PcJjJysg0g%2BcPAZo82y3iz%2BSpaRt%2BHUUz%2FhJC%2BPxxDhr1t45zFdsOh6SgEqIt%2By4U1iD%2BVwnViOzJAw%3D%3D&sign_type=RSA2&timestamp=2018-12-28+14%3A51%3A34&version=1.0';
  				this.$cordova.alipay(data,function(data){
  					
  				},function(res){
  					
  				})
  				break;
				case '2':		//获取APP版本号
  				this.$cordova.getAppVersion(function(data){
  					_this.version=data;
  				},function(res){
  					
  				})
  				break;
        case '3':		//相机拍照
  				this.$cordova.camera(function(data){
  					_this.img='data:image/jpeg;base64,'+data;
            _this.fileURL=data;
  				})
  				break;
        case '4':		//FileTransfer上传
  				this.$cordova.FileTransfer(_this.fileURL,'',function(data){
            alert(data);
          }) 
  				break;
        case '5':		//二维码扫码
  				this.$cordova.barcodeScanner(function(data){
            _this.barcodeScannerText=data;
          })
  				break;
        case '7':		//微信登录
          //第一步：请求CODE
  				this.$cordova.wechatLogin(function(data){
            var code=data.code;
            var url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=wx1544afd82a612fd6&secret=6d9102343119e0c02073316069fa58c0&code="+code +"&grant_type=authorization_code"
            //第二步：通过code获取access_token   在这里就从微信返回了app，以下都是在app里进行的操作了
            _this.$get(url,'').then(Data => {
              var access_token=Data.access_token;
              var openid = Data.openid;
              var url1 = "https://api.weixin.qq.com/sns/auth?access_token=" + access_token +"&openid="+ openid;
              //第三步：通过access_token调用接口
              _this.$get(url1,'').then(Data => {
                //第四步：检验授权凭证（access_token）是否有效
                if("ok" == Data.errmsg){
                  var url2 = "https://api.weixin.qq.com/sns/userinfo?access_token=" +access_token +"&openid="+ openid;
                  // 获取用户个人信息（UnionID机制）
                  _this.$get(url2,'').then(Data => {
                    switch(Data.sex){
                      case '0':
                        Data.sex='未知'
                        break;
                      case '1':
                        Data.sex='男'
                        break;
                      case '2':
                        Data.sex='女'
                        break;
                    };
                    _this.wechatUserInfo=Data;
                  }, err => {
                      alert(err);
                  })
                }else{
                  // 请重新获取access_token
                }
              }, err => {
                  alert(err);
              })
            }, err => {
                alert(err);
            })
          });
  				break;
        case '8':		//微信登录
  				this.$cordova.wechatShare();
  				break;
        case '9':		//微信支付
          var params = {
            partnerid: '1501076801', // merchant id
            prepayid: 'wx301107287447220ab0f2d9b22876740887', // prepay id
            noncestr: '1107293333', // nonce
            timestamp: '1543547251', // timestamp
            sign: 'F19C84AF125E6D44411C8B243CA3F6F1', // signed string
          };
  				this.$cordova.wechatPay(params,function(data){
            alert('success');
          },function(res){
             alert("Failed: " + res);
          });
          break;
        case '10':		//蓝牙开关
            ble.enable(
            　　function() {
            　　　　alert("Bluetooth is enabled");
                    _this.Bluetooth='Bluetooth is enabled';
            　　},
            　　function() {
    　　　　　　　　alert("The user did *not* enable Bluetooth");
            　　});
          break;
        case '11':		//通讯录
            _this.contact=[];
            this.$cordova.contacts(function(data){
              _this.contact=data;
            });
          break;
        case '12':		//打电话
            window.plugins.CallNumber.callNumber(function onSuccess(result){
              alert("Success:call number"+result);
            },
            function onError(result) {
              alert("Error:call number"+result);
            },
            _this.number,true);
          break;
        case '13':		//屏幕截取
           navigator.screenshot.save(function(error,res){
            if(error){
              alert(error);
            }else{
              alert('ok1',res); //should be path/to/myScreenshot.jpg
            }
          },'jpg',50,'截屏照片');
          break;

  		}
  	},
    deviceBtn(name){
      switch(name){
        case 'cordova':
          this.$set(this.device,'cordova',this.$cordova.device(name))
          break;
        case 'model':
          this.$set(this.device,'model',this.$cordova.device(name))
          break;
        case 'platform':
          this.$set(this.device,'platform',this.$cordova.device(name))
          break;
        case 'uuid':
          this.$set(this.device,'uuid',this.$cordova.device(name))
          break;
        case 'version':
          this.$set(this.device,'version',this.$cordova.device(name))
          break;
        case 'manufacturer':
          this.$set(this.device,'manufacturer',this.$cordova.device(name))
          break;
        case 'isVirtual':
          this.$set(this.device,'isVirtual',this.$cordova.device(name))
          break;
        case 'serial':
          this.$set(this.device,'serial',this.$cordova.device(name))
          break;
      }
      
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
p {
  font-size: 0.2rem;
  display: block;
  height: 0.5rem;
  line-height: 0.5rem;
  text-align: center;
  border: 1px solid red;
  border-radius: 0.08rem;
}
img{
  display:block;
  width:4rem;
  height:2rem;
}
</style>
